import React from 'react';
import {Button, Card, Radio} from "antd";
import "./ui.less"

export default class Buttons extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      btnSize: "default",
    };
  }

  render() {
    return (
      <div>
        <Card title="基础按钮" className="card-wrap">
          <Button type="primary">Primary</Button>
          <Button>Normal</Button>
          <Button type="dashed">Dashed</Button>
          <Button type="danger">Danger</Button>
          <Button type="disabled">Disabled</Button>
        </Card>

        <Card title="图形按钮"  className="card-wrap">
          <Button icon="plus">Create</Button>
          <Button icon="edit">Edit</Button>
          <Button icon="delete">Delete</Button>
          <Button shape="circle" icon="search"></Button>
          <Button type="primary" icon="search">Search</Button>
          <Button type="primary" icon="download">Download</Button>
        </Card>

        <Card title="加载按钮"  className="card-wrap">
          <Button type="primary" loading={true}>Ok</Button>
          <Button type="primary" shape="circle" loading={true}></Button>
          <Button loading="true">Click Loading</Button>
          <Button shape="circle" loading={true}></Button>
          <Button type="primary" loading={this.state.loading} onClick={this.handleClose}>Close</Button>
        </Card>

        <Card title="按钮组" style={{marginBottom: "10px"}}>
          <Button.Group>
            <Button type="primary" icon="left">Go back</Button>
            <Button type="primary" icon="right">Go forward</Button>
          </Button.Group>
        </Card>

        <Card title="按钮尺寸" className="card-wrap">
          <Radio.Group value={this.state.btnSize} onChange={this.handleBtnSize}>
            <Radio value="small">Small</Radio>
            <Radio value="default">Default</Radio>
            <Radio value="large">Large</Radio>
          </Radio.Group>
          <Button type="primary" size={this.state.btnSize}>Primary</Button>
          <Button size={this.state.btnSize}>Normal</Button>
          <Button type="dashed" size={this.state.btnSize}>Dashed</Button>
          <Button type="danger" size={this.state.btnSize}>Danger</Button>
        </Card>
      </div>
    );

  }

  handleClose = () => {
    this.setState({
      loading: true,
    });
  }

  handleBtnSize = (e) => {
    this.setState({
      btnSize: e.target.value
    });
  }
}